<template>
  <ContentCard>
    <PageHeaderNew title="我的审批" :breadCrumb="breadCrumb" />
    <div>
      <ApprovalStatus
        v-model:queryType="releaseApprovalParams.queryType"
        @changeStatus="changeStatus"
      />
      <div class="wrap">
        <div class="header">
          <div>
            <span>发送时间段</span>
            <a-range-picker
              showTime
              :time-picker-props="{
                defaultValue: ['00:00:00', '00:00:00']
              }"
              @change="onChange"
              @select="onSelect"
              style="width: 380px; margin: 0 20px 0 10px"
            />
            <a-select
              :style="{ width: '120px', marginRight: '10px' }"
              placeholder="请选择"
            >
              <a-option :value="1">事项名称</a-option>
              <a-option :value="2">发送人</a-option>
            </a-select>
            <a-input-search
              :style="{ width: '220px' }"
              placeholder="请输入内容"
              search-button
              @search="onSearch"
              @press-enter="onSearch"
              v-model="nameSearch"
            />
          </div>
        </div>
        <TableTurn ref="tabbleData" :table-data="getApprovalReleaseData">
          <a-table-column
            title="待审批事项编号"
            data-index="approvalTitle"
            :width="200"
          >
          </a-table-column>
          <a-table-column
            title="待审批项目名称"
            data-index="currentApprovalResult"
            :width="200"
          >
          </a-table-column>
          <!-- <a-table-column title="业务类型" data-index="name" :width="200">
          </a-table-column>
          <a-table-column title="发送人" data-index="name" :width="200">
          </a-table-column>
          <a-table-column title="申请人" data-index="name" :width="200">
          </a-table-column>
          <a-table-column title="接收时间" data-index="name" :width="200">
          </a-table-column>
          <a-table-column title="审批节点" data-index="name" :width="200">
          </a-table-column>
          <a-table-column title="节点耗时" data-index="name" :width="200">
          </a-table-column>
          <a-table-column title="累计耗时" data-index="name" :width="200">
          </a-table-column> -->

          <a-table-column title="状态" data-index="last"> </a-table-column>
          <a-table-column
            title="操作"
            fixed="right"
            :width="100"
            align="center"
          >
            <template #cell="{ record }">
              <a-space>
                <!-- <a-button type="primary" @click="showDialog(record)">
                <template #default>新增</template>
              </a-button> -->

                <a-button type="text" @click="showupDialog(record)">
                  <template #default>审批</template>
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </TableTurn>
      </div>

      <ApprovalDetailDrawer
        v-model:visible="show"
        :approvalCode="activeApprovalCode"
      />
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  getApprovalReleaseList,
  getApprovalReleaseByApprovalCode
} from '@/apis/approvalExecute/index';
import type { ApprovalReleaseParams } from '@/apis/approvalExecute/type';
import ApprovalStatus from './components/ApprovalStatus.vue';
import ApprovalDetailDrawer from './components/ApprovalDetailDrawer.vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const breadCrumb = ['我的审批'];
const releaseApproval = reactive({ list: [] });
const releaseApprovalParams = reactive<ApprovalReleaseParams>({
  appCode: 'APP280373000',
  userId: Number(localStorage.getItem('userId')),
  queryType: 1
});

const getApprovalReleaseData = async (params: any) => {
  const res = await getApprovalReleaseList({
    ...releaseApprovalParams,
    ...params
  });
  releaseApproval.list = res?.content || [];
  return Promise.resolve(res);
};
// getApprovalReleaseData();
const changeStatus = (queryType: number) => {
  refresh();
};
// 刷新表格数据
const refresh = () => {
  tabbleData.value.loadData();
};
const tabbleData = ref();
const show = ref(false);
const activeApprovalCode = ref();
const showupDialog = async (approval: any) => {
  router.push({
    path: '/myApproval/approvalDetails',
    query: { approvalCode: approval.approvalCode }
  });
  // 弹窗审核
  // activeApprovalCode.value = approval.approvalCode;
  // show.value = true;
  //   await getApprovalReleaseByApprovalCode(approval.approvalCode);
};
</script>

<style scoped lang="less">
.wrap {
  padding: 0 20px;

  .header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
}
</style>
